/* 通用的样式  */


/* 起始清空浏览器默认样式 内外边框 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 设置 html和body高度覆盖整个浏览器窗口..   便于设置整个页面背景*/
html, body {
    /* html的父类元素是整个页面 100%就是相对于整个页面  而body是页面内容 父类元素是html 100%也是整个页面高度 */
    /* 不设置100%则高度是和当前存在的内容一致 */
    height: 100%;
}

/*body {*/
/*    !* 背景图片设置  *!*/
/*    !* background-image: url("../image/img2.jpg"); *!*/
/*    !*background-image: url("https://picnew13.photophoto.cn/20190313/jianyuediwenjiandantongyongbeijingmoban-32407848_1.jpg");*!*/
/*    !*background-image: linear-gradient(-225deg, #77FFD2 0%, #6297DB 48%, #1EECFF 100%);*!*/

/*    background-repeat: no-repeat;*/
/*    background-size: cover;*/
/*    background-position: center center;*/
/*}*/

.nav {
    /* 导航栏盒子尺寸 默认是父类元素100% 高度是根据文字行 */
    width: 100%;
    height: 50px;
    /* 导航栏背景色   rgba 透明程度 0~1 越低越透明*/
    background-color: rgba(50, 50, 50, 0.4);
    color: white;

    /* 导航栏内的元素都是水平方向 开启弹性布局 */
    display: flex;
    /* 整个导航栏里的元素垂直居中 */
    align-items: center;
}

/* 弹性布局后 图片可以设置参数 */
.nav img {
    /* 图片尺寸 正方形 */
    height: 40px;
    width: 40px;
    /* 设置导航栏图片左右外边距 */
    margin-left: 30px;
    margin-right: 10px;

    /* 设置图片圆角 为宽度一半*/
    border-radius: 20px;
}

/* 导航栏标题格式 */
.nav .title {
    font-family: '楷体';
    font-size: large;
    width: 150px;
}

/* 设置占位符样式 用于分隔 文字和超链接 */
.nav .spacer {
    height: 100%;
    width: 63%
}

/* 设置导航栏的超链接样式 */
.nav a {
    /* 字体 */
    font-family: '楷体';
    /* 字体白 去掉下划线 */
    color: rgb(223, 229, 243);
    text-decoration: none;

    /* 超链接盒子  */
    width: 70px;
    background-color: grey;
    /* 文本居中 */
    text-align: center;
    /* 标签左右内外边距 用于隔开各标签距离  */

    margin: 0 6px;
}

/* 设置 移动到导航栏跳转按钮时 显示此样式 */
.nav a:hover {
    color: rgb(31, 31, 31);

}

.container {
    /* 设置主体页面宽度 不设则和父类一样 */
    width: 1500px;
    /* 设置页面高度, 由于100%是整个页面, 而主体页面高度要去除导航栏高度  */
    /* 由于页面是不固定高度的,可能随着一些操作而变动所以用100%描述更好 */
    /* css3开始提供一些函数 calc 支持 100% - 50px 这种百分比样式和数字相减 */
    /* css中要描述减号  需要左右两边都至少有一个空格 ,因为之前-是样式符号*/
    height: calc(100% - 50px);
    /* 主体页面居中对齐 */
    margin: 0 auto;

    /* 测试页面宽度效果 */
    /* background-color: aqua; */

    /* 开启弹性布局 */
    display: flex;
    /* 水平方向 中间留空白 */
    /*justify-content: space-between;*/
    /* 垂直居中 */
    /*align-items: center;*/
}

/* 主体内左侧信息格式 */
.container-left {

    /* 高度是父类主体页面的100% */
    /*height: 100%;*/
    height: 100%;
    width: 450px;
    /* background-color: blue; */
}

/* 主体内右侧信息格式 */
.container-right {
    height: 100%;

    width: 800px;
    /* background-color: blueviolet; */
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 10px;

    /* 让此元素能带上滚动条 */
    /* 当此元素内的内容溢出了, 会自动加上滚动条 滑动滚动条显示溢出的内容 */

    /* 防止溢出页面 */
    overflow: auto;


}

/* 用户信息样式 */
.container-left .card {

    /* 调整宽度  */
    width: 170px;
    height: 267px;
    margin-left: 275px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    /* 左边距 调整 使 图片 靠近右边界面*/
    /*margin-left: 25px;*/
    /* 内边距 10px 让内部内容不靠近边 */
    padding: 10px;

}

/* 用户头像 */
.card img {

    /* 调整大小 水平居中 圆角矩形 */
    height: 100px;
    width: 100px;
    /* 图片转换为块级元素 进行居中对齐 */
    display: block;
    margin: 10px auto;
    /* margin:10px 28px; */
    border-radius: 60px;
    alt: "图片加载不出来,请更换jpg格式图片或重新登录一下~";
}

/* 用户名字 */
.card h3 {
    /* 水平居中 外边距10px */
    text-align: center;
    padding: 5px;
}

/* 用户码云链接 */
.card a {
    /* a标签是行内标签 不好设置居中等格式 转换成块级标签 */
    display: block;

    text-align: center;
    color: grey;
    text-decoration: none;
}

.card a:hover {
    color: black;
}

.card .counter {
    /* 开启弹性布局 使内部span元素 排列开 */
    display: flex;
    justify-content: space-around;
    margin: 10px;
}

